<template>
    <BAlert class="tnxbsv-alert" :model-value="modelValue" :variant="type">
        <div class="d-flex">
            <div class="tnxbsv-alert-icon">
                <i :class="iconClass"/>
            </div>
            <div class="tnxbsv-alert-content">
                <slot></slot>
            </div>
        </div>
    </BAlert>
</template>

<script>
import {BAlert} from 'bootstrap-vue-next';

export default {
    name: 'TnxbsvAlert',
    components: {BAlert},
    props: {
        modelValue: {
            type: Boolean,
            default: true,
        },
        type: {
            type: String,
            default: 'light',
        },
        icon: String,
    },
    data() {
        return {};
    },
    computed: {
        iconClass() {
            if (this.icon) {
                return this.icon;
            }
            let iconClass = '';
            switch (this.type) {
                case 'success':
                    iconClass += 'bi-check-circle-fill text-success';
                    break;
                case 'danger':
                    iconClass += 'bi-x-circle-fill text-danger';
                    break;
                case 'warning':
                    iconClass += 'bi-exclamation-circle-fill text-warning';
                    break;
                case 'light':
                    iconClass += 'text-secondary';
                    break;
                default:
                    iconClass += 'text-' + this.type;
            }
            if (!iconClass.startsWith('bi-')) {
                iconClass = 'bi-info-circle-fill ' + iconClass;
            }
            iconClass = 'bi ' + iconClass;
            return iconClass;
        },
    },
    methods: {}
}
</script>

<style>
.tnxbsv-alert-icon {
    line-height: 1.3125rem;
}

.tnxbsv-alert-content {
    margin-left: 0.5rem;
    font-size: 0.875rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
</style>
